<template>
  <div id="app">
    <BasicLayout v-if="!isBlankLayout" />
    <BlankLayout v-else>
      <router-view></router-view>
    </BlankLayout>

    <!-- 加载页面组件 -->
    <LoadingPage v-if="isLoading" ref="loadingPageRef" />

    <FloatButtons />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, RouterView } from 'vue-router'
import BasicLayout from './layouts/BasicLayout.vue'
import BlankLayout from './layouts/BlankLayout.vue'
import LoadingPage from './components/LoadingPage.vue'
import { useLoginUserStore } from './stores/useUserLoginStore'
import FloatButtons from './components/FloatButtons.vue'

const route = useRoute()
const isBlankLayout = computed(() => route.meta.layout === 'blank')
const isLoading = ref(false)
const loadingPageRef = ref()

// 处理路由加载开始
const handleLoadingStart = () => {
  isLoading.value = true
}

// 处理路由加载结束
const handleLoadingEnd = () => {
  if (loadingPageRef.value) {
    loadingPageRef.value.startFadeOut()
    // 等待淡出动画完成后再隐藏组件
    setTimeout(() => {
      isLoading.value = false
    }, 500)
  } else {
    isLoading.value = false
  }
}

// 监听路由加载事件
onMounted(() => {
  window.addEventListener('route-loading-start', handleLoadingStart)
  window.addEventListener('route-loading-end', handleLoadingEnd)
})

// 移除事件监听
onUnmounted(() => {
  window.removeEventListener('route-loading-start', handleLoadingStart)
  window.removeEventListener('route-loading-end', handleLoadingEnd)
})

const loginUserStore = useLoginUserStore()
loginUserStore.fetchLoginUser()
</script>

<style scoped>
#app {
  height: 100vh;
}
</style>
